<template>
  <div class="personal_box">
    <div class="imgs">
      <img src="@/assets/img/mrtx.webp" alt="" />
    </div>
    <div class="username">青木川川川</div>
    <div class="userinfo">这是下一个腾讯CEO</div>
    <div class="userclass">
      <!-- <span v-for="item of datas" :key="item">{{ item.labelClass }}</span> -->
    </div>
    <div class="csdn">
      <a
        href="https://blog.csdn.net/qmcqmcqmc?type=blog"
        class="csdn_a"
        target="_blank"
      >
        CSDN,出发go go go!</a
      >
    </div>
    <div class="csdn">
      <a href="https://gitee.com/yan-wenchang" class="csdn_a" target="_blank">
        Gitee,出发go go go!</a
      >
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
</script>

<style scoped lang="less">
.personal_box {
  width: 4rem;
  position: relative;
  border-radius: @dyj;
  background-color: @tmb;
  border: @xborder solid @qls;
  box-sizing: border-box;
  > div {
    margin-top: 0.2rem;
  }

  .imgs {
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 100%;
    border: @xborder solid @hs;
    margin: 0.2rem auto 0;

    img {
      width: 1.2rem;
      height: 1.2rem;
      border-radius: 100%;
    }
    @keyframes text {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }
  }

  .username {
    text-align: center;
    font-size: 0.24rem;
    font-weight: 900;
  }

  .userinfo {
    text-align: center;
    font-size: 0.16rem;
    font-weight: 400;
  }

  .userclass {
    display: flex;
    flex-wrap: wrap;
    font-size: 0.14rem;

    span {
      display: inline-block;
      padding: 0.1rem 0.2rem;
      border-radius: 0.1rem;
      margin: 0.1rem;
      background-color: @bs;
      color: @hui_font;
    }
  }

  .csdn {
    width: 2.8rem;
    height: 0.4rem;
    line-height: 0.4rem;
    text-align: center;
    font-size: 0.2rem;
    margin: 0.1rem auto;
    font-weight: 900;
    background-color: @tml;
    border-radius: 0.08rem;
    color: @bs;
    border: @xborder solid @qls;
    cursor: pointer;
    .monkeys {
      vertical-align: middle;
      width: 0.8rem;
      height: 0.4rem;
      margin-right: 0.1rem;
    }
  }
}
</style>
